<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta name="description" content="Settings for DB for ESP32">
    <meta name="author" content="Wolfgang Christl">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DB for ESP32 Settings</title>
	<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <meta name="theme-color" content="#3166FF">
    <link inline href="skeleton.css" />
    <link inline href="toastify/toastify.css" />
    <link inline href="dronebridge.css" />
    <script inline src="toastify/toastify.js"></script>
    <script inline src="dronebridge.js"></script>
</head>
<body>
<div class="container">
    <br>
    <div class="twelve columns">
        <img src="DroneBridgeLogo.png" alt="DB Logo">
    </div>
</div>
<div class="container">
    <form id="settings_form">
        <div>
            <div class="info issue" id="issue_div">
                There might be an issue with your baud rate configuration.<br>Match the UART baud rates on the flight controller and the ESP32.<br>The ESP32 is receiving serial bytes but fails to decode the MAVLink messages.
            </div>
            <h2>Statistics</h2>
            <div class="row">
                <div id="web_conn_status" class="six columns small_text">
                </div>
            </div>
            <div class="row">
                <div id="current_client_ip" class="twelve columns small_text">
                </div>
            </div>
            <div class="row">
                <div class="four columns">
                    <label>received bytes serial port</label>
                    <div id="read_bytes">-</div>
                </div>
                <div class="four columns">
                    <label>Connected TCP clients</label>
                    <div id="tcp_connected">-</div>
                </div>
                <div class="four columns">
                    <label>Connected UDP clients</label>
                    <div style="display: flex" >
                        <div id="udp_connected" class="tooltip" style="width: fit-content"><span class="tooltiptext" id="tooltip_udp_clients">-</span>-</div>
                        <img class="img_button" style="margin-left: 5rem; padding: 0.2rem" height="20em" alt="add" src="add_16dp_icon.png" onclick="add_new_udp_client()"/>
                        <img class="img_button" style="margin-left: 0.5rem; padding: 0.2rem" height="20em" alt="delete" src="remove_16dp_icon.png" onclick="clear_udp_clients()"/>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <h2>Settings</h2>
            <h3>Wi-Fi</h3>
            <div class="row">
                <div class="twelve columns">
                    <label for="esp32_mode">ESP32 Mode</label>
                    <select id="esp32_mode" name="esp32_mode" form="settings_form" onchange="change_ap_ip_visibility()">
                        <option value="1">Wi-Fi Access Point Mode</option>
                        <option value="2">Wi-Fi Client Mode</option>
                        <option value="3">Wi-Fi Access Point LR Mode</option>
                        <option value="4">ESP-NOW LR Mode AIR</option>
                        <option value="5">ESP-NOW LR Mode GND</option>
                        <option value="6">Bluetooth LE</option>
                    </select>
                    <div class="info note" id="esp-lr-ap-disclaimer"><h4>Attention:</h4>
                        LR Mode makes the device invisible for non-LR enabled devices!<br>You will not be able to change the config!<br><br>
                        The data rate is reduced to ~0.25Mbps. The range may be increased by a factor of ~2.<br>Press the boot
                        button (short press for AP-Mode with password "dronebridge" or long press for reset to defaults)
                        or erase the flash memory of the ESP32 and re-flash DroneBridge for ESP32 to get back into
                        normal Wi-Fi Mode!
                    </div>
                    <div class="info note" id="ble_disclaimer_div"><h4>Attention:</h4>
                        <b>BETA: Bluetooth LE (BLE) is currently in beta testing.</b><br>
                        The application (e.g. GCS software, Betaflight Configurator) must explicitly support DroneBridge BLE connections.<br>
                        At the moment only the recent Betaflight Configurator (BFC) supports BLE connections but does so very poorly.<br><br>
                        Use the <a href="https://dronebridge.gitbook.io/docs/dronebridge-for-esp32/configuration#bluetooth-le">DroneBridge BLE Bridge</a> to connect QGC, MissionPlanner or BFC to your ESP32 running DroneBridge BLE.<br>
                        Your Wi-Fi Access Point Mode configuration will be used to host an AP in parallel so you can still access this configuration page.
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="six columns" id="wifi_ssid_div">
                    <label for="ssid">SSID</label>
                    <input type="text" name="ssid" value="" id="ssid" maxlength="31">
                </div>
                <div class="six columns" id="pass_div">
                    <label for="wifi_pass">Password</label>
                    <input type="text" name="wifi_pass" value="" id="wifi_pass" minlength="8" maxlength="63" required>
                </div>
            </div>
            <div class="row">
                <div id="ap_channel_div" class="six columns">
                    <label for="wifi_chan">Channel</label>
                    <select id="wifi_chan" name="wifi_chan" form="settings_form">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                    </select>
                </div>
                <div class="six columns" id="ap_ip_div">
                    <label for="ap_ip">Gateway IP address</label>
                    <input type="text" name="ap_ip" value="" id="ap_ip">
                </div>
            </div>
            <div id="wifi_en_gn_div" class="row">
                <div class="twelve columns">
                    <div class="checkbox-wrapper-14">
                        <input id="wifi_en_gn" name="wifi_en_gn" type="checkbox" class="switch">
                        <label class="tooltip" for="wifi_en_gn"><span class="tooltiptext">Only enable this when you need b/g/n/ax support. When off there is only 802.11b support in Wi-Fi client mode which provides sufficient bandwidth and is ideal for range. 802.11ax only on supported chips.</span>802.11b/g/n/ax support</label>
                    </div>
                </div>
            </div>
            <div id="radio_dis_onarm_div" class="row">
                <div class="twelve columns">
                    <div class="checkbox-wrapper-14">
                        <input id="radio_dis_onarm" name="radio_dis_onarm" type="checkbox" class="switch">
                        <label for="radio_dis_onarm">Disable radio when autopilot is armed</label>
                    </div>
                </div>
            </div>
            <div id="ant_use_ext_div" class="row">
                <div class="twelve columns">
                    <div class="checkbox-wrapper-14">
                        <input id="ant_use_ext" name="ant_use_ext" type="checkbox" class="switch">
                        <label for="ant_use_ext">Use external antenna</label>
                    </div>
                </div>
            </div>
            <div id="static_ip_config_div">
                <details>
                    <summary>Advanced Wi-Fi Settings</summary>
                    <div class="row">
                        <div class="six columns" id="ip_sta_div">
                            <label for="ip_sta">Static IP Address</label>
                            <input type="text" name="ip_sta" value="" id="ip_sta" maxlength="15" placeholder="optional - can be empty">
                        </div>
                        <div class="six columns" id="ip_sta_gw_div">
                            <label for="ip_sta_gw">Static IP Gateway Address</label>
                            <input type="text" name="ip_sta_gw" value="" id="ip_sta_gw" maxlength="15" placeholder="optional - can be empty">
                        </div>
                    </div>
                    <div class="row">
                        <div class="six columns" id="ip_sta_netmsk_div">
                            <label for="ip_sta_netmsk">Static IP Netmask</label>
                            <input type="text" name="ip_sta_netmsk" value="" id="ip_sta_netmsk" maxlength="15" placeholder="optional - can be empty">
                        </div>
                        <div class="six columns" id="wifi_hostname_div">
                            <label for="wifi_hostname">Hostname</label>
                            <input type="text" name="wifi_hostname" value="" maxlength="31" id="wifi_hostname" placeholder="DroneBridgeESP32">
                        </div>
                    </div>
                </details>
            </div>
            <h3 style="margin-top: 2rem">Serial</h3>
            <div class="row" id="tx_rx_div">
                <div class="six columns">
                    <label for="gpio_tx">UART TX GPIO</label>
                    <input type="number" name="gpio_tx" value="" id="gpio_tx">
                </div>
                <div class="six columns">
                    <label for="gpio_rx">UART RX GPIO</label>
                    <input type="number" name="gpio_rx" value="" id="gpio_rx">
                </div>
            </div>
            <div class="row" id="rts_cts_div">
                <div class="six columns">
                    <label for="gpio_rts">UART RTS GPIO</label>
                    <input type="number" name="gpio_rts" value="" id="gpio_rts" onchange="flow_control_check()">
                </div>
                <div class="six columns">
                    <label for="gpio_cts">UART CTS GPIO</label>
                    <input type="number" name="gpio_cts" value="" id="gpio_cts" onchange="flow_control_check()">
                </div>
            </div>
            <div class="row" id="rts_thresh_div">
                <div class="six columns">
                    <label for="rts_thresh">UART RTS threshold</label>
                    <input type="number" id="rts_thresh" name="rts_thresh" min="1" max="128">
                </div>
            </div>
            <div class="row">
                <div class="six columns">
                    <label for="proto">UART serial protocol</label>
                    <select id="proto" name="proto" form="settings_form"
                            onchange="change_msp_ltm_visibility()">
                        <option value="1">MSP/LTM</option>
                        <option value="4">MAVLink</option>
                        <option value="5">Transparent</option>
                    </select>
                </div>
                <div class="six columns" id="baud_div">
                    <label for="baud">UART baud</label>
                    <select name="baud" id="baud" form="settings_form">
                        <option value="5000000">5000000</option>
                        <option value="1500000">3000000</option>
                        <option value="1500000">2000000</option>
                        <option value="1500000">1500000</option>
                        <option value="1000000">1000000</option>
                        <option value="921600">921600</option>
                        <option value="576000">576000</option>
						<option value="500000">500000</option>
                        <option value="460800">500800</option>
                        <option value="460800">460800</option>
                        <option value="230400">230400</option>
                        <option value="115200">115200</option>
                        <option value="76800">76800</option>
                        <option value="57600">57600</option>
                        <option value="38400">38400</option>
                        <option value="19200">19200</option>
                        <option value="9600">9600</option>
                        <option value="4800">4800</option>
                        <option value="2400">2400</option>
                        <option value="1200">1200</option>
                    </select>
                </div>
            </div>
            <div id="msp_ltm_div" class="row">
                <div class="twelve columns">
                    <label for="ltm_per_packet">LTM frames per packet</label>
                    <select id="ltm_per_packet" name="ltm_per_packet" form="settings_form">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
            </div>
            <div id="trans_pack_size_div" class="row">
                <div class="six columns">
                    <label for="trans_pack_size">Maximum packet size</label>
                    <select id="trans_pack_size" name="trans_pack_size" form="settings_form">
                        <option value="16">16</option>
                        <option value="32">32</option>
                        <option value="64">64</option>
                        <option value="96">96</option>
                        <option value="128">128</option>
                        <option value="160">160</option>
                        <option value="192">192</option>
                        <option value="224">224</option>
                        <option value="256">256</option>
                        <option value="288">288</option>
                        <option value="320">320</option>
                        <option value="352">352</option>
                        <option value="384">384</option>
                        <option value="416">416</option>
                        <option value="448">448</option>
                        <option value="480">480</option>
                        <option value="512">512</option>
                        <option value="544">544</option>
                        <option value="576">576</option>
                        <option value="608">608</option>
                        <option value="640">640</option>
                        <option value="672">672</option>
                        <option value="704">704</option>
                        <option value="736">736</option>
                        <option value="768">768</option>
                        <option value="800">800</option>
                        <option value="832">832</option>
                        <option value="864">864</option>
                        <option value="896">896</option>
                        <option value="928">928</option>
                        <option value="960">960</option>
                        <option value="992">992</option>
                        <option value="1024">1024</option>
                        <option value="1056">1056</option>
                    </select>
                </div>
                <div class="six columns">
                    <label for="serial_timeout">Serial read timeout [ms]</label>
                    <input type="number" id="serial_timeout" name="serial_timeout" min="1" max="65535" value="50">
                </div>
            </div>
            <div id="rep_rssi_dbm_div" class="row">
                <div class="twelve columns">
                    <div class="checkbox-wrapper-14">
                        <input id="rep_rssi_dbm" name="rep_rssi_dbm" type="checkbox" class="switch">
                        <label for="rep_rssi_dbm">Report Rssi in [dBm] instead of 0-100</label>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="six columns">
            <button class="button-primary" onclick="save_settings()">Save Settings & Reboot</button>
        </div>
    </div>
</div>
<div class="container">
    <div id="esp_mac" style="margin-top: 1rem" class="row small_text"></div>
    <div id="about" class="row">DroneBridge for ESP32 - waiting for a response from the ESP32
    </div>
    <div style="margin-bottom: 2rem" class="row">&copy; Wolfgang Christl 2018 - Apache 2.0 License</div>
</div>
<script>
    // get settings once upon page load
    while (get_system_info() < 0) {
    }
    while (get_settings() < 0) {
    }
    // get stats every half a second
    setInterval(get_stats, 500)
    setInterval(update_conn_status, 500)
    setInterval(check_for_issues, 1000)
    setTimeout(change_msp_ltm_visibility, 500)
    setTimeout(change_ap_ip_visibility, 500)
    setTimeout(change_uart_visibility, 500)
</script>
</body>
</html>
